<template>
  <div class="timeline">
    <!-- 时间轴线 -->
    <div class="TimeLineAxis" ref="timeLineAxis" @scroll="scrollAxis">
      <!-- 所有的刻度 -->
      <div class="TimeLineAxis--line" :style="scaleStyle">
        <div class="TimeLineAxis--line__item" v-for="(item, index) in (24 * 6) * options.scaleNum" :key="index" :index="index">
          <div class="kedu" :class="{ hour: isShowTimelineKedu(index) }" :index="index">
            <span v-if="isShowTimelineKedu(index)">{{ Math.floor((index + 1) / 6) % 24 }}:00</span>
          </div>
        </div>
      </div>
      <!-- 有效时间 -->
      <div class="TimeLineAxis--timelist" :style="scaleStyle" ref="timeline" v-if="false">
        <div class="TimeLineAxis--timelist__item" v-for="(item, index) in videoArr" :key="item.beginTimeStr" :style="getVideoStyle(item)" :index="index"></div>
      </div>
    </div>
    <!-- 指针 -->
    <div class="timeline--pointer">
      <div class="timeline--pointer__top"></div>
      <div class="timeline--pointer__center"></div>
      <div class="timeline--pointer__bottom"></div>
    </div>
    <div v-if="false">
      <button @click="getDatetimeByPosition">根据位置计算出时间</button>
      <button @click="getPositionByTimestamp">根据时间戳定位</button>
    </div>
  </div>
</template>

<script>
// import { hisDateArr } from '@/assets/mock/data'
import dayjs from 'dayjs'
export default {
  props: {
    config: {
      // 用户传递过来的配置
      type: Object,
      default () {
        return {
          platformOrderNo: 'MO_1732326922936909824',
          subOrderNo: 'SQO_1732326922936909825',
          storeName: '耒阳东区(B)超市',
          createdAt: '2023-12-06 17:11:38',
          payStateDesc: '已支付',
          payTypeDesc: '微信',
          merchantName: '耒阳服务区',
          orderAmount: '600',
          payAt: '2023-12-06 17:11:41',
          indexCode: '6f61c3924d444e918ee871cedcb5cfe3',
          cameraIndexCode: '6f61c3924d444e918ee871cedcb5cfe3'
        }
      }
    }
  },
  data () {
    return {
      timer: null, // 滚动条的定时器
      firstTimeStamp: 0, // 第一个开始的时间段
      lastTimeStamp: 0, // 最后 一个开始的时间段
      minTimeStamp: 0, // 时间进度轴的起始时间
      startDate: null,
      pointerPosition: 0,
      // hisDateArr: hisDateArr,
      videoArr: [],
      dateObj: null,
      options: {
        // 控制进度条的配置
        minLength: 30, // 一个刻度是30px
        minTime: 10, // 最小刻度是 10 分钟
        scaleNum: 3, // 时间刻度有几天，默认是 昨天、今天、明天  三天
        // currentTime: new Date('2023-12-06 17:11:38') // 当前的某一个时刻，根据当前时刻，计算出 回放进度条的位置
        currentTime: null // 当前的某一个时刻，根据当前时刻，计算出 回放进度条的位置
      }
    }
  },
  watch: {
    // 其他组件传递过来的 控制面板的 配置信息
    config: {
      handler: function () {
        debugger
        const payAt = this.config.payAt
        // 比实际播放时间晚2秒钟，解决实际显示视频比传递数据过来慢的bug
        this.options.currentTime = new Date(new Date(payAt).getTime() - 1 * 1000)
         this.resetRender()
        // this.resetComputeFlag = [] // 触发重新计算的值，规避缓存
        // this.$nextTick(() => {
        //   // 重新获取统计的数据， true 表示强制重新获取
        //   this.reCalcStatisticStyle(true)
        // })
      },
      deep: true,
      immediate: true
    },
    // 渲染 控制面板的 配置信息
    options: {
      handler: function () {
        debugger
        // 根据当前时间，重新渲染时间刻度
        this.resetRender()
        // this.reCalcStatisticStyle() // 重新计算 统计的样式
      },
      deep: true
    }
  },
  mounted () {
    // // 将后台返回的数据做转换
    // this.transOriginData()
    // this.calcScaleLenth()
    // this.getPositionByTimestamp(this.firstTimeStamp)
    // const payAt = this.config.payAt
    // this.options.currentTime = new Date(new Date(payAt).getTime() - 1 * 1000) // 比实际播放时间晚2秒钟，解决实际显示视频比传递数据过来慢的bug
  },
  computed: {
    // 计算出时间轴的最大宽度
    scaleStyle () {
      const { minLength, minTime, scaleNum, currentTime } = this.options
      return `width: ${minLength * (60 / minTime) * 24 * scaleNum}px;--minScaleWidth:${minLength}px;`
    }
  },
  methods: {
    // 根据当前时间，重新渲染时间刻度
    resetRender () {
      const { minLength, minTime, scaleNum, currentTime } = this.options
      debugger
      this.getMinDate() // 获取最小时间
      this.getPositionByTimestamp(currentTime.getTime()) // 根据时间戳获取定位
    },
    // 将后台返回的数据做转换
    transOriginData () {
      const result = {}
      const maxLength = this.hisDateArr.length
      console.log(this.hisDateArr)
      this.hisDateArr.forEach((element, index) => {
        const beginTimeDate = new Date(element.beginTime)
        const endTimeDate = new Date(element.endTime)
        const beginTimeMoment = dayjs(beginTimeDate)
        const endTimeMoment = dayjs(endTimeDate)
        const beginTimeStr = beginTimeMoment.format('YYYY-MM-DDThh:mm:ss[Z]')
        const endTimeStr = endTimeMoment.format('YYYY-MM-DDThh:mm:ss[Z]')
        const startDayStr = beginTimeStr.substring(0, 10)
        const statTimeStamp = beginTimeDate.getTime()
        const endTimeStamp = endTimeDate.getTime()
        const persistenceMillisecond = endTimeStamp - statTimeStamp
        const todayStartMinute = (statTimeStamp - new Date(startDayStr + ' 00:00:00').getTime()) / 1000 / 60
        const persistenceMinutes = persistenceMillisecond / 1000 / 60
        if (!result[startDayStr]) {
          result[startDayStr] = []
        }
        console.log(maxLength, index)
        if (index === 0) {
          this.firstTimeStamp = statTimeStamp
        }
        if ((index + 1) === maxLength) {
          this.lastTimeStamp = endTimeStamp
        }
        result[startDayStr].push({
          // beginTimeDate,
          // endTimeDate,
          // beginTimeMoment,
          // endTimeMoment,
          statTimeStamp,
          endTimeStamp,
          beginTimeStr,
          endTimeStr,
          startDayStr,
          todayStartMinute, // 视频在当天开始的时间（即当天经过了多长时间)
          persistenceMillisecond, // 视频持续的时间（毫秒）
          persistenceMinutes // 视频持续的时间（分钟）
        })
      })
      this.dateObj = result
    },
    // 获取最小时间
    getMinDate () {
      const { minLength, minTime, scaleNum, currentTime } = this.options
      const dateStr = this.dateFormat('yyyy-mm-dd', currentTime)
      const dateTimeStamp = new Date(dateStr + ' 00:00:00').getTime()
      // 时间轴的起始位置时间戳
      this.minTimeStamp = dateTimeStamp - 24 * 60 * 60 * 1000
    },
    // 计算刻度的长度
    calcScaleLenth () {
      // 获取最小的起始时间戳
      this.getMinDate()
      // 计算出刻度的个数，即左右两个 + 实际选择的天数
      this.scaleNum = Object.keys(this.dateObj).length + 2
      // 需要根据视频的数据，计算 包含视频的 宽度 和 起始位置
      const videoArr = Object.values(this.dateObj)
      videoArr.forEach((dayVideoArr, index1) => {
        dayVideoArr.forEach((item, index) => {
          const position = (index1 + 1) * 8 * 6 * 24 + (item.todayStartMinute / 10) * 8
          const width = (item.persistenceMinutes / 10) * 8
          item.width = width
          item.position = position
          this.videoArr.push(item)
        })
      })
    },
    // 滑动坐标轴，触发的事件
    scrollAxis (eventObj) {
      // 窗口的宽度  滚动条滚动的距离
      console.log(eventObj.target.offsetWidth, eventObj.target.scrollLeft)
      // 指针指向的位置
      const pointerPosition = eventObj.target.offsetWidth / 2 + eventObj.target.scrollLeft
      // console.log('pointerPosition', pointerPosition)
      this.pointerPosition = pointerPosition
      // 滑动的时候，添加定时器，自动触发视频切换
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        console.log('getDatetimeByPosition')
        this.getDatetimeByPosition()
      }, 1500)
    },
    // 根据位置计算出时间
    getDatetimeByPosition () {
      const { minLength, minTime, scaleNum, currentTime } = this.options
      const startMinutes = (this.pointerPosition / minLength) * minTime // 指针距离其实日期的分钟数
      const currentTimestamp = this.minTimeStamp + startMinutes * 60 * 1000
      const dateStr = this.dateFormat('yyyy-mm-dd hh:MM:ss', new Date(currentTimestamp))
      console.log(dateStr)
      for (let i = 0; i < this.videoArr.length; i++) {
        const tempObj = this.videoArr[i]
        if (currentTimestamp < tempObj.endTimeStamp) {
          console.log('true i, currentTimestamp, tempObj', i, currentTimestamp, tempObj.endTimeStamp, tempObj)
          break
        }
      }
      console.log('seekChange', currentTimestamp, this.lastTimeStamp)
      // this.$emit('seekChange', currentTimestamp, this.lastTimeStamp)
    },
    // 根据时间戳获取定位
    getPositionByTimestamp (timestamp) {
      const { minLength, minTime, scaleNum, currentTime } = this.options
      // const timestamp = this.firstTimeStamp
      // console.log(this.dateFormat('yyyy-mm-dd hh:MM:ss', new Date(timestamp)))
      // console.log(this.dateFormat('yyyy-mm-dd hh:MM:ss', new Date(this.minTimeStamp)))
      const durationTime = timestamp - this.minTimeStamp
      // minTime 分钟为 minLength
      const longWidth = (durationTime / (1000 * 60 * minTime)) * minLength
      const screenWidth = screen.width
      const srolleWidth = longWidth - (screenWidth / 2)
      // console.log('longWidth', longWidth)
      this.$nextTick(() => {
        this.$refs.timeLineAxis.scrollLeft = srolleWidth
      })
    },
    dateFormat (fmt, date) {
      let ret
      const opt = {
        'y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'h+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        's+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'))
        }
      }
      return fmt
    },
    getVideoStyle (videoObj) {
      return {
        width: videoObj.width + 'px',
        left: videoObj.position + 'px'
      }
    },
    isShowTimelineKedu (index) {
      // if ((index + 1) % 6 === 0 || index === 0) {
      if (index % 6 === 0 || index === 0) {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.timeline {
  // 最小刻度宽度的像素，这里是10分钟
  --minScaleWidth: 8px;
  // 最小刻度宽度的高度，这里是10分钟
  --minScaleHeight: 8px;
  // 容器的总高度
  --containerHeight: 56px;
  // 刻度的高度
  --scaleHeight: 36px;
  position: relative;
  .TimeLineAxis {
    width: 100%;
    overflow-x: scroll;
    height: var(--containerHeight);
    background: #262626;
    color: #b3afaf;
    position: relative;
    &--line {
      height: var(--scaleHeight);
      width: calc(var(--minScaleWidth) * 6 * 24);
      font-size: 12px;
      &__item {
        width: var(--minScaleWidth);
        height: var(--scaleHeight);
        display: inline-block;
        position: relative;
        .kedu {
          border-right: 1px solid #b3afaf;
          display: inline-block;
          height: var(--minScaleHeight);
          position: absolute;
          top: 0;
          left: 0;
          &.hour {
            height: 15px;
            span {
              position: absolute;
              top: 18px;
              right: -15px;
            }
          }
        }
        // 最后一个刻度
        // &:last-child{
        //   .kedu{
        //     // right:0;
        //     &.hour{
        //       height: --minScaleWidth;
        //     }
        //   }
        //   &::after{
        //     content: "";
        //     display: inline-block;
        //     height: 15px;
        //     border-right: 1px solid #b3afaf;
        //     position: absolute;
        //     right: 0;
        //   }
        // }
      }
    }
    &--timelist {
      position: absolute;
      left: 0;
      width: calc(var(--minScaleWidth) * 6 * 24);
      bottom: 0;
      height: 20px;
      // border: 1px solid red;
      &__item {
        background-color:#4e6fae;
        width: 30px;
        height: calc(var(--containerHeight) - var(--scaleHeight));
        position: absolute;
        left: 50px;
      }
    }
  }
  &--pointer{
    position: absolute;
    left: 50%;
    top: 0;
    height: 56px;
    &__top {
      width: 10px;
      border-top: 2px solid #fff;
      position: absolute;
      right: -4px;
    }
    &__center {
      border-right: 2px solid #fff;
      height: 100%;
    }
    &__bottom {
      position: absolute;
      bottom: 0;
      width: 10px;
      border-top: 2px solid #fff;
      right: -4px;
    }
  }
}
</style>
